<template>
	<transition name="el-zoom-in-center">
		<div class="container" >
			<div class="main-header">
				<el-page-header :content="title" @back="goBack"></el-page-header>
			</div>

			<div  >
		
					<div class="main-lf">
						
						<el-card class="main-lf-b"  shadow="never">
							<div class="label">发票列表</div>
							<el-table class="table" :data="ticketsData" border style="width: 100%">
								<el-table-column label="发票金额"  prop="amount" align="center"  width="140"></el-table-column>
								<el-table-column label="附件"  align="center">									
									<template slot-scope="scope">
										<div class="file-flex" v-for="(item,index) in scope.row.fileList" :key="index">
											<el-image v-if="item.suffix != 'pdf'" style="width: 50px; height: 50px"
												:src="upload.baseUrl + item.file"
												:preview-src-list="[upload.baseUrl + item.file]">
											</el-image>
											<div v-else class="file-pdf"
												@click="pdfPreview(upload.baseUrl + item.file)">
												<img src="../../../assets/images/pdf.png" alt="" />
											</div>
										</div>
									</template>
								</el-table-column>

							</el-table>
						</el-card>




						<el-dialog custom-class="pdfPreview" title="PDF预览" :visible.sync="filePdfShow" width="100vw"
							append-to-body>
							<iframe :src="filePdfUrl" frameborder="0"></iframe>
						</el-dialog>

					</div>



				<div class="footer">
					<el-button type="primary" round  @click="printPreview()">打印单据</el-button>
				</div>
			</div>

		</div>
	</transition>
</template>

<script>
import {getBxContract} from "@/api/business/bxExpense";
import {getToken} from '@/utils/auth'



	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
		},
		components: {

		},
		data() {
			return {
				filePdfShow:false,
				filePdfUrl:'',
				ticketsData:[	],
				// 上传
				upload: {
					// 上传的地址
					url: process.env.VUE_APP_BASE_API + "/common/upload",
					// 设置上传的请求头部
					headers: {
						Authorization: "Bearer " + getToken()
					},
					// 回显
					baseUrl: process.env.VUE_APP_BASE_API,
				},
			}
		},
		
		methods: {
			initPage(val){
				let id = val.id
				getBxContract(id).then(res => {
					
					let allFiles = res.data.recordList
					console.log('-------------发票',allFiles)
					this.ticketsData =allFiles.filter(item=>
							item.projectDictId== 'fp'
						)
				})
			},



			goBack(){
				console.log('点击返回')
				this.$emit("close2");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: calc(100% - 60px);
		position: absolute !important;
		z-index: 999;
		top: 0;
		left: 0;
		background: #FAFAFA;
		padding: 20px;

		.footer {
			width: 100%;
			height: 60px;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 50px;
			background-color: #ffffff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

			.footer-num {
				color: #5493FB;
				font-size: 18px;
				font-weight: bold;
				margin-right: 28px;
			}
		}

		.label {
			font-size: 16px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #409EFF;
			margin-bottom: 22px;
		}
	}

	.main-header {
		margin-bottom: 20px;
	}

	::v-deep .steps-box-card {
		margin-bottom: 10px;

		.el-card__body {
			padding: 15px 20px 8px 20px;
		}
	}

	.main-steps {
		width: 50%;
		margin: 0 auto;
	}

	.main-flex {
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	::v-deep .main-lf {
		width:100%;
		height: 100%;

		.main-lf-t {
			margin-bottom: 10px;
		}

		.main-lf-t .el-card__body {
			padding: 15px 20px 0px 20px;
		}

		.main-lf-b {
			overflow-y: auto;
		}

		.main-lf-b::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		/*正常情况下滑块的样式*/
		.main-lf-b::-webkit-scrollbar-thumb {
			width: 5px;
			background-color: rgba(0, 0, 0, .05);
			border-radius: 10px;
			-webkit-box-shadow: inset1px1px0rgba(0, 0, 0, .1);
		}

		/*正常时候的主干部分*/
		.main-lf-b::-webkit-scrollbar-track {
			width: 5px;
			border-radius: 10px;
			-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0);
			background-color: white;
		}

	}

	::v-deep .main-rt {
		width: 350px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.box-card {
			margin-bottom: 12px;

			.el-card__body {
				padding: 15px 20px 0 20px;
			}
		}
	}

	::v-deep .el-image {
		margin-right: 2px;
	}

	::v-deep .el-image:last-child {
		margin-right: 0px;
	}

	::v-deep .el-dialog__body {
		overflow: hidden;
	}

	.file-flex {
		display: inline-block;
		margin-right: 8px;
		position: relative;
	}

	.file-flex-close {
		position: absolute;
		top: -5px;
		right: 0;
		cursor: pointer;
		z-index: 9999;
		display: none;
	}

	.file-flex:hover {
		.file-flex-close {
			display: block;
		}
	}

	.file-flex:last-child {
		margin-right: 0px;
	}
	::v-deep .pdfPreview {
		width: 100vw;
		height: 100vh;
		margin-top: 0 !important;
		background-color: rgb(82, 86, 89);

		.el-dialog__title {
			color: #f3f3f3;
		}


		.el-dialog__body {
			width: 100%;
			height: calc(100% - 54px);
		}

		.el-dialog__body iframe {
			width: 100%;
			height: 100%;
		}

		.el-dialog__headerbtn .el-dialog__close {
			color: #f3f3f3 !important;
		}
	}

	::v-deep .table .el-input.is-disabled .el-input__inner {
		background-color: #ffffff !important;
		border-color: #DCDFE6;
		color: #606266;
	}

	::v-deep .printPreview {
		height: 800px;
		overflow: hidden;
		background-color: rgb(82, 86, 89);

		.el-dialog__title {
			color: #f3f3f3;
		}

		.el-dialog__body {
			width: 100%;
			height: calc(100% - 54px);
			overflow-y: auto;
			position: relative;
		}
	}
	.attachLine{
		display: flex;
		align-items: center;
	}
	.attachAddBtn{
		width:76px;
		height: 76px;
		background: #f9f9f9;
		border-radius: 10px;
		border:1px solid #ced8eb;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #409eff;
	}
	.attachAddBtn i{
		font-size: 18px;
	}
	.attachInfo{
		display: flex;
		align-items: center;
	}
	.attachInfo-img{
		width:76px;
		height: 76px;
	}

	.file-pdf {
		width: 76px;
		height: 76px;
		cursor: pointer;
	}

	.file-pdf img {
		width: 100%;
		height: 100%;
	}
	.attachInfo-txt{
		margin:0 20px
	}
	.attachInfo i{
		font-size: 24px;
		color: #88bbef;
		cursor: pointer;
	}
</style>
<style lang="scss" scope>
	.hour-picker1 {
		.el-scrollbar:nth-of-type(2) {
			display: none !important;
		}

		.el-scrollbar:nth-of-type(3) {
			display: none !important;
		}

		.el-time-spinner__wrapper {
			width: 100% !important;
		}
	}
</style>